import * as THREE from 'three'
export class Cylinder {
  constructor(scene, time) {
    this.scene = scene
    this.time = time
  }
  createCylinder(options) {
    const geometry = new THREE.CylinderGeometry(
      options.radius,
      options.radius,
      options.height,
      32,
      1,
      options.open
    )
    // 向上移动一半，防止一般在界面下方
    geometry.translate(0, options.height / 2, 0)
    const meterial = new THREE.ShaderMaterial({
      uniforms: {
        u_color: {
          value: new THREE.Color(options.color)
        },
        u_height: {
          value: options.height
        },
        u_opacity: {
          value: options.opacity
        },
        u_speed: {
          value: options.speed
        },
        u_time: this.time
      },
      transparent: true, // 开启透明度
      vertexShader: `
        uniform float u_time;
        uniform float u_height;
        uniform float u_speed;
        varying float v_opacity;
        void main () {
          // 不同图形不同的扩散速度 u_speed
          vec3 v_position = position * mod (u_time / u_speed, 1.0);
          v_opacity = mix(1.0, 0.0, position.y / u_height);
          gl_Position = projectionMatrix * modelViewMatrix * vec4(v_position, 1.0);
        }
      `,
      fragmentShader: `
        varying float v_opacity;
        uniform vec3 u_color;
        uniform float u_opacity;
        void main () {
          gl_FragColor = vec4(u_color, u_opacity * v_opacity);
        }
      `,
      side: THREE.DoubleSide, // 解决值只展示一半的问题
      depthTest: false // 不会被其他东西遮挡
    })
    const mesh = new THREE.Mesh(geometry, meterial)
    mesh.position.copy(options.position)
    this.scene.add(mesh)
  }
}
